<template>
  <div >
    <div class="nav">
      <div class="nav-wrap">
        <div class="firsd">
          <img class="nav-img" src="../../../static/images/location.png" alt="">
          <div  class="address" v-if="addressa!=''" >
            {{addressa}}
          </div>
          <img class="nav-img" @click="gerLocation" src="../../../static/images/xia.png" alt="">
        </div>
        <div class="end">
          <img  class="nav-img" src="../../../static/images/dunpai.png" alt="">
          <img  class="nav-img" src="../../../static/images/er.png" alt="">
        </div>
      </div>
    </div>
    <div class="page">
      <div class="page__bd">
        <div class="weui-search-bar">
          <div class="weui-search-bar__form">
            <div class="weui-search-bar__box">
              <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
              <input type="text" class="weui-search-bar__input" placeholder="搜索" v-model="inputVal" :focus="inputShowed" @input="inputTyping" />
              <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
                <icon type="clear" size="14"></icon>
              </div>
            </div>
            <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
              <icon class="weui-icon-search" type="search" size="14"></icon>
              <div class="weui-search-bar__text">搜索</div>
            </label>
          </div>
          <div class="weui-search-bar__cancel-btn" :hidden="!inputShowed" @click="hideInput">取消</div>
        </div>
      </div>
    </div>
    <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex;width: 100%; height: 360rpx; color:#000; "  >
        <!--  display: inline-block-->
        <div style=" background-color: #fff;color:#000; width: 100%; height: 360rpx; display: inline-block" >
          <div class="icon-wrap">
            <div class="icon"@tap="toDetail(item.MerchantSortId)" v-for="(item,index) of merchantSort" :key="index">
              <div class="icon-img">
                <img
                  class="icon-img-content"
                  :src="item.SortImg">
                <p class="icon-desc">{{item.SortName}}</p>
              </div>
            </div>
          </div>

        </div>
        <div style=" background-color: #fff;color:#000;width: 20%; height: 360rpx; display: inline-block">
          <div class="icon-wrap">
            <div class="icon" @click="handletry">
              <div class="icon-img">
                <img
                  class="icon-img-content"
                  src="https://gw.alicdn.com/tfs/TB1BqystrZnBKNjSZFrXXaRLFXa-183-144.png?getAvatar=1_.webp">
                <p class="icon-desc">heh</p>
              </div>
            </div>
          </div>
        </div>

      </scroll-view>
    <div class="redTC">
      <div class="tc">
        <img class="tci" src="../../../static/images/hot1.png" alt="" /> <div class="str">红包套餐</div> <div class="min-str">立拿24元</div>
      </div>
      <div class="lastTime">
        <img  class="tci" src="../../../static/images/hot2.png" alt="" /><div class="str">红包套餐</div> <div class="min-str">立拿24元</div>
      </div>
    </div>
    <div class="Bargain">
      <div class="bar-top">
        <div class="bar-top-left " @click="sss">劲爆砍价</div><div class="bar-top-right">更多></div>
      </div>
      <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex;width: 100%; height: 250rpx; color:#000; "  >
        <!--  display: inline-block-->
        <div style=" color:#000; width: 23%; height: 170rpx; display: inline-block"  v-for="(itema,index) in good" :key="index" >
          <div class="goods-wrap">
            <img  class="goods-img" :src="itema.imgesa" alt="" />
            <div class="goods-price">￥0</div>
            <div class="goods-old">{{itema.old}}</div>
          </div>
        </div>
      </scroll-view>
    </div>
    <div class="content">
      <swiper indicator-dots indicator-color="pink" indicator-active-color="green"
              autoplay=aautoplay
              circular=ccircular>
        <swiper-item><img class="z-img" src="http://p1.music.126.net/ri7DIybLn_hbpv3JzrAzmg==/109951164189785999.jpg" alt="" /></swiper-item>
        <swiper-item><img class="z-img" src="http://p1.music.126.net/m0KkKA3TGQajIlEoip6qrQ==/109951164188718192.jpg" alt=""/></swiper-item>
        <swiper-item><img  class="z-img" src="http://p1.music.126.net/-mEJQ8KVkwQTKJ5ECbhsiQ==/109951164188738175.jpg" alt=""/></swiper-item>
        <swiper-item><img class="z-img" src="https://gw.alicdn.com/tfs/TB1jRH4jgHqK1RjSZFkXXX.WFXa-920-340.jpg" alt=""/></swiper-item>
        <swiper-item><img class="z-img" src="http://img.alicdn.com/tps/i4/TB1D6xsaF67gK0jSZPfSuuhhFXa.jpg_q90_.webp" alt=""/></swiper-item>
      </swiper>
    </div>
    <div class="Bargain newoffer">
      <div class="bar-top">
        <div class="bar-top-left ">优惠专区</div>
      </div>
      <div class="offer">
        <div class="offer-top">
          <img class="o-t-i radius-t-l" src="http://img.alicdn.com/imgextra/i2/132379518/O1CN01w4YtPX2KBIIMP7QIJ_!!0-saturn_solar.jpg_220x220.jpg_.webp" alt="" />
          <img class="o-t-i radius-t-r" src="http://img.alicdn.com/imgextra/i1/442350056/O1CN01efB6rN1CHgitTZ1iK_!!0-saturn_solar.jpg_220x220.jpg_.webp" alt="" />
        </div>
        <div class="offer-bottom">
          <img class="o-b-i radius-b-l" src="http://img.alicdn.com/imgextra/i3/331620082/O1CN01WnjxXC1CTb197Y8fA_!!0-saturn_solar.jpg_220x220.jpg_.webp" alt="" />
          <img class="o-b-i" src="http://img.alicdn.com/imgextra/i3/331620082/O1CN01WnjxXC1CTb197Y8fA_!!0-saturn_solar.jpg_220x220.jpg_.webp" alt="" />
          <img class="o-b-i" src="http://img.alicdn.com/imgextra/i3/331620082/O1CN01WnjxXC1CTb197Y8fA_!!0-saturn_solar.jpg_220x220.jpg_.webp" alt="" />
          <img class="o-b-i radius-b-r" src="http://img.alicdn.com/imgextra/i3/331620082/O1CN01WnjxXC1CTb197Y8fA_!!0-saturn_solar.jpg_220x220.jpg_.webp" alt="" />
        </div>
      </div>


    </div>
    <div class="merchant">
      <div class="bar-top">
        <div class="bar-top-left ">劲爆砍价</div>
      </div>
      <ListTemp v-for="(item,index) in merchantData" :item="item" :key="index" :index="index"/>

    </div>
    <div class="shiyishi">
      {{count2}}
    </div>
    <div class="shiyishi">
      {{count1}}
    </div>
    <button @click="addfun">+</button>
    <button @click="removeaddf">-</button>






  </div>
</template>

<script>
// import {location} from "../../utils/api"
import {mapState,mapActions,mapGetters} from 'vuex'
// import iconsss from '../icon/index'
// import ListTemp from '../list-template/list-template'
export default {
  components: {
    // iconsss, ListTemp
  },
  beforeMount() {
    //分发action修改状态
    // this.$store.dispatch('getList');
    // console.log(this.listTmp);
    // this.merchantData = this.listTmp[0].typeDetail;
    // console.log(this.merchantData)


  },
  computed: {
    //映射状态到本组件
    // ...mapState(['listTmp']),

  },
  data() {

    return {
      numbe:this.$store.getters.gerStateCount,
      num:this.$store.state.count,
      merchantSort: '',
      namea: '',
      addressa: '',
      inputShowed: false,
      inputVal: "",
      imgUrls: [
        'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      ],
      autoplay: false,
      displaymultipleitems: "2",
      circular: true,
      // interval: 5000,
      // duration: 1000
      good: [
        {
          imgesa: 'http://img.alicdn.com/imgextra/i1/693739777/TB2TW6MtwxlpuFjy0FoXXa.lXXa_!!693739777-0-daren.jpg_180x180xzq90.jpg_.webp',
          old: '￥49'
        },
        {
          imgesa: 'http://img.alicdn.com/tfscom/i2/TB16M2.RXXXXXbgXFXXYXGcGpXX_M2.SS2_180x180xzq90.jpg_.webp',
          old: '￥55'

        },
        {
          imgesa: 'http://img.alicdn.com/imgextra/i3/15353738/TB2HDHAqN9YBuNjy0FfXXXIsVXa_!!15353738-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp',
          old: '￥50005'

        }, {
          imgesa: 'http://img.alicdn.com/tfscom/i1/TB1e3Heo_JYBeNjy1zeYXGhzVXa_M2.SS2_180x180xzq90.jpg_.webp',
          old: '￥505'

        }, {
          imgesa: 'http://img.alicdn.com/tps/i4/O1CN018UDNMW1voo0oSZiM9_!!0-juitemmedia.jpg_180x180q90.jpg_.webp',
          old: '￥575'

        }, {
          imgesa: 'http://img.alicdn.com/tfscom/i2/2691207657/TB28nPadUcKL1JjSZFzXXcfJXXa_!!2691207657.jpg_180x180xzq90.jpg_.webp',
          old: '￥9955'

        }, {
          imgesa: 'http://img.alicdn.com/imgextra/i4/196580791/TB2z6NYjLBNTKJjSszeXXcu2VXa_!!196580791-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp',
          old: '￥665'

        }, {
          imgesa: 'http://img.alicdn.com/imgextra/i1/3107144874/TB2i9NXbwkLL1JjSZFpXXa7nFXa_!!3107144874-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp',
          old: '￥565'

        }],
      merchantData: {},


    }
  },
  computed:{
    ...mapState({
      count1:state=>state.count,
      count2:getters => getters.gerStateCount
    })
  },
  onLoad() {
    // console.log(this);
    console.log(this.$store.state.count);
    var that = this;
    wx.chooseLocation({
      success: function (res) {
        let name = res.name;
        let address = res.address;
        that.namea = name;
        that.addressa = "";
        that.addressa = address

      }
    });
    wx.request({
      url: 'http://192.168.1.20:8099/WebHandler/GuoUserHandler.ashx',
      method: 'post',
      data: {
        type: 'merchant_sort',
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: function (res) {
        // console.log(res);
        that.merchantSort = res.data.allmerchantsort;
        // console.log(that.merchantSort);

      }
    })

  },
  methods: {
    // merchantTry() {
    //   for( var i = 0; i<10;i++){
    //     this.merchantData=this.listTmp[i].typeDetail
    //   }
    // },
    sss () {
      console.log(111)
      wx.setStorageSync('fff', 'ssss')
      console.log(wx.getStorageSync('fff'))
      wx.clea
    },
    showInput() {
      this.inputShowed = true;
    },
    hideInput() {
      this.inputVal = '';
      this.inputShowed = false
    },
    clearInput() {
      this.inputVal = '';
    },
    inputTyping(e) {
      console.log(e);
      this.inputVal = e.mp.detail.value
    },
    handletry() {
      console.log(listTmp)
    },

    gerLocation() {

      var that = this;
      wx.chooseLocation({
        success: function (res) {
          let name = res.name;
          let address = res.address;

          that.namea = name;
          that.addressa = '';
          that.addressa = address

        }
      })
    },
    toDetail(x) {
      //跳转页面 +传参
      wx.navigateTo({
        url: '/pages/todetail/main?index=' + x
      })


    },
    addfun(){
      this.$store.dispatch("addfun");

    },
    removeaddf(){
      this.$store.dispatch("removeadd")

    }

  }
}
</script>

<style scoped>
  .shiyishi{
    height: 100px;
  }
.nav{
  height: 50rpx;
  width: 100%;
  background-color: #49B152;
  color:#fff;

}
.nav-wrap{
  width:92%;
  height: 100%;  display: flex;
  justify-content: space-between;
  align-items: center;
  margin:0 auto;
}
.firsd{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.end{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width:100rpx;


}
.nav-img{
    height: 30rpx;
    width: 30rpx;
  }
  .address{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width:482rpx;
    font-family: STSong;

  }
.searchbar-result {
  margin-top: 0;
  font-size: 14px;
}
.searchbar-result:before {
  display: none;
}
.weui-cell {
  padding: 12px 15px 12px 35px;
}
.slide-image{
  height: 100%;
  width:100%;
}
.icon{
  position: relative;
  width: 150rpx;
  height: 47%;
  float: left;

}
.icon-img{
  position: absolute;
  height: 100%;
  width:100%;
  box-sizing: border-box;
  padding: 5px;
}
.icon-img-content {
  display: block;
  margin: 0 auto;
  height: 70%;
  width:91%;
}
.icon-desc{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rpx;
  line-height: 26rpx;
  font-size:27rpx;

  text-align: center;

}
.icon-wrap{
  height: 90%;
  width: 100%;
  margin:0 auto;
  margin-top:15rpx;
}
  .scrol{
    width:100%;
    border-bottom: 1rpx solid #fff;
    border-radius:10rpx;
  }
  .redTC{
    height: 104rpx;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom-left-radius:22rpx;
    border-bottom-right-radius: 22rpx;
    background-color:#fff;
  }
  .tc,
  .lastTime{
   border-radius:10rpx;
    width:45%;background: #F1F1F1;
    height: 60%;
    line-height: 82rpx;

    display: flex;
    align-items: center;
  }

  .tci{
    height: 40rpx;
    width:40rpx;
    margin-left:10rpx;

  }
  .str{
    font-weight: 700;
  }
.min-str{
  font-size: 20rpx;
  color: #cccccc;
  margin-left:10rpx;
}
  .Bargain{
    margin-top: 13rpx;
    border-radius: 22rpx;
    background-color: #ffffff;
    height: 367rpx;
    border-top:1rpx solid #fff;
  }
  .bar-top{
    display: flex;
    justify-content: space-between;
    width:95%;
    margin:0 auto;
    margin-top:20rpx;
    margin-bottom:20rpx;

  }
  .bar-top-left{
    font-weight: 700;
  }
  .bar-top-right{
    font-size:20rpx;
  }
  .goods-wrap{
    height:250rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .goods-img{
    height: 80%;
    width:80%;
  }
  .goods-price{
    color:red;
  }
  .goods-old{
    text-decoration:line-through;
    color:#ccc;
  }
  .content{
    margin-top:15rpx;
    width:100%;
  }
  .z-img{
    border-radius: 22rpx;
    width:100%;
    height: 100%;
  }
  .offer{
    display: flex;
    height: 78%;
    flex-direction: column;

  }
 .offer-top{
   height: 55%;
   display: flex;
   justify-content: space-around;
   align-items: center;
 }
  .offer-bottom{
    height: 46%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .newoffer{
    height: 500rpx;
  }
  .o-t-i{
    height: 95%;
    width: 49%;

  }
  .o-b-i{
    height: 100%;
    width:24%;
  }
  .radius-t-l{
    border-top-left-radius: 18rpx;
  }
  .radius-t-r{
    border-top-right-radius: 18rpx;
  }
  .radius-b-l{
    border-bottom-left-radius: 18rpx;
  }
  .radius-b-r{
    border-bottom-right-radius: 18rpx;
  }
  .merchant{
    margin-top: 13rpx;
    border-radius: 22rpx;
    background-color: #ffffff;
    border-top:1rpx solid #fff;
  }

</style>
